<template>
  <div class="order-box">
    <div class="order-main">
      <div class="order-search flex">
        <el-input
          class="input"
          placeholder="请输入内容"
          v-model="input"
          clearable
        ></el-input>
        <el-button @click="getsearch" type="" icon="el-icon-search"></el-button>
      </div>
      <div class="order-table">
        <el-table stripe border :data="orderList" style="width: 100%">
          <el-table-column
            align
            type="index"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column
            align
            width="300"
            prop="order_number"
            label="订单编号"
          ></el-table-column>
          <el-table-column align width="80" prop="order_price" label="订单价格">
          </el-table-column>
          <el-table-column align label="是否付款">
            <el-button style="color: skyblue" size="mini">已付款</el-button>
          </el-table-column>
          <el-table-column align width="80" prop="is_send" label="是否发货">
          </el-table-column>
          <el-table-column
            align
            width="200"
            prop="create_time"
            label="下单时间"
          >
          </el-table-column>
          <el-table-column align width="250" prop="order_price" label="操作">
            <div class="flex">
              <el-tooltip content="修改地址" placement="top">
                <el-button size="mini" type="primary" @click="changeAdd"
                  >修改地址</el-button
                >
              </el-tooltip>
              <el-tooltip content="查看物流" placement="top">
                <el-button size="mini" type="success" @click="showLog"
                  >查看物流</el-button
                >
              </el-tooltip>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="order-page">
        <div class="block flex">
          <el-select v-model="value" @change="getNewSize">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-pagination
            :total="total"
            :page-size="value"
            @current-change="getNewNum"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="orderShow">
      <div class="orderadd">
        <el-dialog title="修改地址" :visible.sync="showadd">
          <div>
            <span class="add"> <span>*</span> 地址</span>
            <el-cascader
              :options="optionsadd"
              :props="{ checkStrictly: true }"
              clearable
            ></el-cascader>
          </div>
          <div>
            <span class="add"> <span>*</span> 详细地址</span>
            <el-input
              class="input"
              placeholder="请输入详细地址"
              prefix-icon="el-icon-location"
              v-model="input2"
            >
            </el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="changeAdd">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div class="orderlog">
        <el-dialog title="查看物流" :visible.sync="showlog">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in log"
              :key="index"
              :timestamp="item.time"
              >{{ item.content }}</el-timeline-item
            >
          </el-timeline>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      showadd: false,
      showlog: false,
      input: "",
      input2: "",
      pagenum: "1",
      pagesize: "10",
      orderAll: [],
      orderList: [],
      log: [],
      total: 0,
      value: 10,
      optionsadd: [],
      options: [
        { value: 2, label: "2条/页" },
        { value: 10, label: "10条/页" },
        { value: 20, label: "20条/页" },
        { value: 30, label: "30条/页" },
      ],
    };
  },
  async created() {
    this.getOrder();
    const log = await this.$http.get("/log.json");
    this.log = log.data;
    const add = await this.$http.get("/address.json");
    this.optionsadd = add.data;
    console.log(this.optionsadd);
    const ress = await this.$htp.orderList(1, 30);
    this.orderAll = ress.data.data.goods;
    console.log(ress);
  },
  methods: {
    async getOrder() {
      const res = await this.$htp.orderList(this.pagenum, this.pagesize);
      res.data.data.goods.forEach((item) => {
        console.log(item.create_time);
        item.create_time = moment(item.create_time * 1000).format(
          "yyyy-MM-DD hh:mm:ss"
        );
        console.log(item.create_time);
      });
      this.orderList = res.data.data.goods;
      this.total = res.data.data.total;
    },
    getNewSize(value) {
      this.pagesize = value;
      this.getOrder();
    },
    getNewNum(value) {
      this.pagenum = value;
      this.getOrder();
    },
    changeAdd() {
      this.showadd = !this.showadd;
    },
    showLog() {
      this.showlog = true;
    },
    getsearch() {
      const arr = this.orderAll.filter((item) => {
        return item.order_number.indexOf(this.input) != -1;
      });
      this.orderList = arr;
    },
    indexMethod(index) {
      return index;
    },
  },
};
</script>

<style>
.order-box {
  width: 100%;
}
.order-main {
  width: 80%;
  padding: 30px;
  margin: 50px auto;
  box-shadow: 0 0 5px 1px black;
}
.order-table {
  margin: 30px 0;
}
.flex {
  display: flex;
}
.input {
  width: 300px;
}
.orderadd div {
  margin: 10px auto;
}
.add {
  width: 20%;
  display: inline-block;
}
.add > span {
  color: red;
}
</style>
